<template>
	<!-- 图片选择压缩组件 -->
	<view @click="fnSelectimg" class="select-wrap">
		<slot name="main"></slot>
		<slot></slot>
		<canvas class="photo_canvas"  canvas-id="photo_canvas" 
		:style="{width:canvasWidth,height:canvasHeight}"></canvas>
	</view>
</template>

<script>
	export default{
		props:{
			value:{},
			count:{
				type:String,
				default:'1'
			},
			size:{
				default:300
			},
			sizeType:{
				
			}
			
		},
		watch:{
			value(nval){
				//console.log(nval)
				this.imgurls=nval
			},
			imgurls(nval){
				this.$emit('input',nval)
			}
		},
		data(){
			return{
				imgurls:[],
				canvasWidth:'',
				canvasHeight:''
			}
		},
		methods:{
			fnSelectimg(){
				let that=this
				//that.imgurls=[]
				//console.log(that.count)
				uni.chooseImage({
					count: that.count, //默认9
					//sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						// uni.getFileInfo({
						// 	filePath:res.tempFilePaths[0],
						// 	success:(e)=>{
						// 		console.log(e)
						// 	}
						// })
						let src = res.tempFilePaths;
							that.fnSuoFangImg(src,0); ////0是下面递归参数  src路径集合 num 下面判断参数
					
					}
				});
			},
			fnSuoFangImg(src,index) { ////缩放图片函数
				uni.showLoading({
					title: "图片压缩中..."
				})
				let that=this
				if(index<src.length){
					uni.getImageInfo({
						src: src[index],
						success: (image) => {
							// console.log(image)
							// console.log(image.width);
							// console.log(image.height);
							var ctx = uni.createCanvasContext('photo_canvas',this);
							var canvasWidth = image.width
							var canvasHeight = image.height;
							var scale = 1;
							var tt = that.size; //限制图片大小，只是示例，可以根据具体的要求去设定
							if (canvasWidth > tt || canvasHeight > tt) {
								if (canvasWidth > canvasHeight) {
									scale = tt / canvasWidth;
								} else {
									scale = tt / canvasHeight;
								}
							}
							//console.log(scale)
							//设置canvas尺寸
							let w=Math.floor(canvasWidth*scale)
							let h=Math.floor(canvasHeight*scale)
							that.canvasWidth = w+'px';
							that.canvasHeight = h+'px';
							// console.log(w)
							// console.log(h)
							
							//console.log(that.canvasWidth)
							ctx.drawImage(src[index],0,0,w,h);
							ctx.draw();
							index=index+1
							setTimeout(()=>{
								uni.canvasToTempFilePath({
									fileType: 'jpg',
									quality: 0.9,
									canvasId: 'photo_canvas',
									destWidth:w,
									destHeight:h,
									success: (res) => {
										//console.log(res)
										console.log(res.tempFilePath)
										that.imgurls=that.imgurls.concat(res.tempFilePath)
										that.fnSuoFangImg(src,index)
										// uni.getFileInfo({
										// 	filePath:res.tempFilePath,
										// 	success:(e)=>{
										// 		console.log(e)
										// 	}
										// })
										// uni.getImageInfo({
										// 	src:res.tempFilePath,
										// 	success: (t) => {
										// 		console.log(t)
										// 	}
										// })
									},
									fail: (error) => {
										uni.hideLoading()
										console.log(error)
									}
								},this)
											
							}, 300)
							
									
						},
						fail: function(error) {
							console.log(error)
							//uni.hideLoading()
						}
					}); ///////imginfo
					
					
					
				}else{
					// console.log(index)
					// this.imgurls.map(v=>{
					// 	console.log(v)
					// })
					console.log(that.imgurls)
					uni.hideLoading()
				}
				
				
			}, /////////////////图片处理结束！
			
		}
	}
</script>

<style lang="scss">
	.select-wrap{
		width: fit-content;
		height: fit-content;
	}
	.photo_canvas {
		position: absolute;
		left: -1100%;
		top:-1100%;
	}
</style>
